<template>
  <NConfigProvider
    abstract
    :theme="themeInfo"
    :themeOverrides="themeOverrides"
    :locale="zhCN"
    :hljs="hljs"
  >
    <NThemeEditor>
      <NLoadingBarProvider>
        <NMessageProvider>
          <NDialogProvider>
            <router-view />
          </NDialogProvider>
        </NMessageProvider>
      </NLoadingBarProvider>
    </NThemeEditor>
  </NConfigProvider>
</template>

<script setup lang="ts">
import { computed, ref, onMounted } from 'vue'
import hljs from 'highlight.js/lib/core'
import javascript from 'highlight.js/lib/languages/javascript'
import LS from '@/utils/LocalStorage'
import { themesStore } from '@/stores/modules/theme'
import { storeToRefs } from 'pinia'
import {
  NConfigProvider,
  NThemeEditor,
  NLoadingBarProvider,
  NMessageProvider,
  NDialogProvider,
  darkTheme,
  zhCN
} from 'naive-ui'
hljs.registerLanguage('javascript', javascript)
const isDark = ref(false)
const themeInfo = computed(() => {
  return isDark.value ? darkTheme : undefined
})

const theme = themesStore()
const { setConfirmTheme } = theme
const { getThemeOverrides: themeOverrides } = storeToRefs(theme)
onMounted(() => {
  if (LS.get('themeConfig')) {
    setConfirmTheme(LS.get('themeConfig'))
    document.documentElement.style.cssText = LS.get('themeConfigStyle')
  }
})
</script>

<style scoped></style>
